webpack使用Node.js 编写的打包器从入口点开始逐步构建一个依赖图，然后将项目中所需的模块组合成一个或多个bundle文件，即逐级递归识别依赖，构建依赖图谱 ；

vite无需进行bundle操作，源文件之间的依赖关系通过浏览器对ESM规范的支持来解析，将应用中的模块区分为 依赖(node_modules) 和 源码(项目代码) 两类；

由于webpack本身是经过了漫长的bundle过程，得到了一个完整的模块关系依赖包，所以不存在这两个方面的问题；

而vite由于unbundle机制，首屏、懒加载会存在一定的问题，处理时需要额外做以下工作：

webpack需要先把所有的模块建立依赖关系打包成一个大文件，速度相对较慢；

vite将应用中的模块区分为 依赖(node_modules) 和 源码(项目代码) 两类，进行预构建，速度会快很多；

依赖：使用esbuild预构建，esbuild使用Go编写，比以Node.js编写的打包器预构建依赖快10-100倍；

源码：在浏览器请求时按需转换并以原生ESM方式提供源码，让浏览器接管了打包程序的部分工作；

webpack：

vite：

在vite中，HMR是在原生ESM上执行的，当编辑一个文件时，只需要精确地使已编辑的模块与其最近的 HMR边界之间的链失效(大多数时候只需要模块本身)，使HMR更新始终快速，无论应用的大小；

vite同时利用HTTP头来加速整个页面的重新加载(再次让浏览器为我们做更多事情)：

源码模块的请求会根据304 Not Modified进行协商缓存；

依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable进行强缓存;

webpack在生产环境的构建方面更加成熟，bundle整体形成完善的依赖关系，也有非常多的loader或者plugin可供选择；

vite在生产环境的构建目前用的Rollup：

vite在生产环境，如果使用ESM会存在大量额外网络请求问题：

使用 rollup打包而不是速度惊人的esbuild，这是因为esbuild针对构建应用的重要功能仍然还在持续开发中 —— 特别是代码分割和css处理方面，rollup在应用打包方面更加的成熟且灵活；

当未来这些功能稳定后，也不排除使用 esbuild 作为生产构建器的可能；

webpack 的第一次发布是在 2013 年发布，是长久以来主流的前端打包工具；

vite 的第一次发布是在 2021 年，重点解决webpack 在开发阶段的开发痛点；

截止 2023.4，webpack 的 Github Star 数 62.9k，刚发布两年的vite 的 Star 数是 54.9k，热度可见一斑；

vite 的核心理念就是借助浏览器原生 ES Modules 能力，当浏览器发出请求时，为浏览器按需提供 ES Module 文件，浏览器获取 ES Module 文件会直接执行，即使首次启动的预构建也是使用速度惊人的esbuild完成，虽然存在一些小的问题(例如：首屏、懒加载性能），但瑕不掩瑜，速度、效率、体验已非webpack可比，我自己在最近的项目工作中也是使用的vite(项目从0到1)，感觉nice。

当面试官问到这两个工程化工具之间的区别，大家可以从以上几个方面去聊一聊，理清思路、抓住重点、侃侃而谈，相信会为你的面试加分！

本篇文章主要用于个人学习理解webpack和vite之间的差异点，有不足之处，欢迎指出🍺🍺🍺

也欢迎大家多多探讨，共同进步！

优质文章参考：